<!-- src/views/nurse/nurse_user_orders/components/ConditionDisplay.vue -->
<template>
  <div class="condition-display">
    <div class="condition-display-group">
      <!-- 标题1 -->
      <div class="record-item FamilyVerify">
        <div class="title">3、服务对象核验，对线上全面评估和专项评估记录单复用，进行线下访视后的全面评估和专项健康评估的更正、补充，结构化量表+AI辅助诊断</div>
        <div class="content">
          <div class="describe">
            {{ familyVerify_data.describe }}
          </div>
          <div class="image-container" v-if="familyVerify_imgList && familyVerify_imgList.length > 0">
            <img class="image"
              v-for="(imgData, index) in familyVerify_imgList" 
              :key="index"
              :src="getImageUrl(imgData)"
              :alt="'手动核验照片 ' + (index + 1)"
              @error="handleImageError"
            />
          </div>
          <div v-else class="no-image">暂无数据</div>
        </div>
      </div>

      <!-- 标题2 -->
      <div class="record-item OptReady">
        <div class="title">4、操作准备: 物联网设备状态记录 + 耗材扫码 </div>
        <div class="content">
          <div v-for="(item, index) in optItems.data" class="optItem">
            <text>
              ({{ index + 1 }}) {{ item.title }}
            </text>
            <text style="color: gray; padding-left: 12px;">
              {{ item.text }}
            </text>
            <img class="image"
              v-for="(imgData, index) in item.imgList" 
              :key="index"
              :src="getImageUrl(imgData)"
              :alt="'门楣照片 ' + (index + 1)"
              @error="handleImageError"
            />
            <div v-if="!item" class="no-image">暂无数据</div>
          </div>
        </div>
      </div>
    </div>

    <div class="condition-display-group">
      <!-- 操作过程记录 (视频记录 + 关键节点照片/截图) -->
      <div class="record-item FamilyVerify">
        <div class="title">5、操作过程记录 (视频记录 + 关键节点照片/截图)</div>
        <div class="content">
          <div v-for="(item, index) in optRecords_data" class="optItem">
            <text>
              ({{ index + 1 }}) {{ item.title }}
            </text>
            <text style="color: gray; padding-left: 12px;">
              {{ item.describe }}
            </text>
            <div class="image" v-for="imgData in optRecords_imgList" >
              <img 
                v-if="imgData.childrenIndex === index"
                :src="getImageUrl(imgData)"
                @error="handleImageError"
              />
            </div> 
            <div v-if="!item" class="no-image">暂无数据</div>
          </div>
        </div>
      </div>

      <!-- 6、医疗废弃物处置、收集，RFID标签 + 扫描 -->
      <div class="record-item OptReady">
        <div class="title">6、医疗废弃物处置、收集，RFID标签 + 扫描 </div>
        <div class="content">
          <div class="describe">
            {{ optDsp_data.describe }}
          </div>
          <div class="image-container" v-if="optDsp_imgList && optDsp_imgList.length > 0">
            <img class="image"
              v-for="(imgData, index) in optDsp_imgList" 
              :key="index"
              :src="getImageUrl(imgData)"
              :alt="'手动核验照片 ' + (index + 1)"
              @error="handleImageError"
            />
          </div>
        </div>
      </div>

      <!-- 7、健康宣教 -->
      <div class="record-item OptReady">
        <div class="title">7、健康宣教 </div>
        <div class="content">
          
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';

/* 使用安好医护端接口请求头 */
const url_head = 'https://anfine.huasun-healthcare.com:80/api_anhao'; //线上
// const url_head = 'http://127.0.0.1:8085/jeecg-boot'; //本机

// 定义props
const props = defineProps({
  orderId: {
    type: String,
    default: ''
  }
});

//操作准备子项列表
const optItems = ref({
  orderId: props.orderId,
  data: [
          {
              title: '技术准备',
              text: '',
              imgList: [],
              type: 'text-imgList-scan'
          },
          {
              title: '物料准备',
              text: '',
              imgList: [],
              type: 'text-imgList-scan'
          },
          {
              title: '设备准备',
              text: '',
              imgList: [],
              type: 'text-imgList-scan'
          },
          {
              title: 'demo',
              text: '',
              imgList: [],
              type: 'text-imgList-video'
          },
  ]
});

const familyVerify_data = ref({} as any);
const familyVerify_imgList = ref<any[]>([]);

const optRecords_data = ref<any[]>([]);
const optRecords_imgList = ref<any[]>([]);

const optDsp_data = ref({} as any);
const optDsp_imgList = ref<any[]>([]);

// 可以在这里定义一些内部逻辑，例如根据selectedOption动态加载数据等
const loadData = async () => {
  console.log('props', props);
  try {
    //3、...
    const familyVerifydata = await defHttp.get({
      url: url_head + '/registOrder/selectRgstLintelByOrderId?orderId=' + props.orderId,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    familyVerify_data.value = familyVerifydata || {};
    
    const familyVerifyImgList = await defHttp.get({
      url: url_head + '/registOrder/selectRgstPhotosByOrderIdAndType?orderId=' 
                      + props.orderId + '&type=1',
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    familyVerify_imgList.value = Array.isArray(familyVerifyImgList) ? familyVerifyImgList : [];
    console.log('familyVerify_data', familyVerify_data.value);
    console.log('familyVerify_imgList', familyVerify_imgList.value);

    //4、操作准备
    const optReadyData = await defHttp.get({
      url: url_head + '/registOrder/selectRgstOpByOrderId?orderId=' + props.orderId,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    console.log('optReadyData', optReadyData);
    for(let i = 0; i < optReadyData.length; i ++){
      optItems.value.data[i].text = optReadyData[i].describe;
      optItems.value.data[i].imgList = await defHttp.get({
        url: url_head + '/registOrder/selectRgstPhotosByOrderIdAndType?orderId=' 
                        + props.orderId + '&type=' + (i + 3),
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
      });
    }

    //5、操作过程记录
    const optRecords = await defHttp.get({
      url: url_head + '/registOrder/selectRgstOperationProgressByOrderId?orderId=' + props.orderId,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    optRecords_data.value = optRecords || {};
    console.log('optRecords_data', optRecords_data.value);
    const optRecordsImgList = await defHttp.get({
      url: url_head + '/registOrder/selectRgstPhotosByOrderIdAndType?orderId=' 
                      + props.orderId + '&type=' + 7,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    optRecords_imgList.value = optRecordsImgList;
    console.log('optRecords_imgList', optRecords_imgList.value);

    //6、医疗废弃物处置、收集，RFID标签 + 扫描
    const optDisposalData = await defHttp.get({
      url: url_head + '/registOrder/selectRgstMedicalWasteDcByOrderId?orderId=' + props.orderId,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    console.log('optDisposalData:', optDisposalData);
    optDsp_data.value = optDisposalData;
    const optDisposalImgList = await defHttp.get({
      url: url_head + '/registOrder/selectRgstPhotosByOrderIdAndType?orderId=' 
                      + props.orderId + '&type=' + 8,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    console.log('optDisposalImgList:', optDisposalImgList);
    optDsp_imgList.value = optDisposalImgList;

  } catch (error) {
    console.error('加载数据失败:', error);
  }
}

// 获取图片URL的函数，处理不同的数据结构
const getImageUrl = (imgData: any) => {
  // console.log('imgData:', imgData);
  if (!imgData) return '';
  
  // 如果imgData本身就是URL字符串
  if (typeof imgData === 'string') {
    return imgData.startsWith('http') ? imgData : url_head + imgData;
  }
  
  // 如果imgData是对象，尝试获取url属性
  if (imgData.url) {
    return imgData.url.startsWith('http') ? imgData.url : url_head + imgData.url;
  }
  
  // 如果imgData有其他可能的图片路径属性
  if (imgData.path) {
    return imgData.path.startsWith('http') ? imgData.path : url_head + imgData.path;
  }
  
  // 如果都没有，返回空
  return '';
};

onMounted(() => {
  loadData();
});

// 图片加载错误处理
const handleImageError = (event: any) => {
  console.error('图片加载失败:', event);
  event.target.style.display = 'none';
};
</script>

<style scoped>
.condition-display {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
  height: 100%;
  gap: 20px;
}

.condition-display-group {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
  height: 100%;
  gap: 20px;
}

.record-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.describe {
  padding-left: 24px;
  font-size: 13px;
  color: grey;
  word-wrap: break-word;
}

.title {
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.content div {
  flex: 1;
}

.content img {
  max-width: 100%;
  height: auto;
}

.FamilyVerify, .OptReady {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.optItem {
  display: flex;
  flex-direction: column;
}

.no-image {
  display: flex;
  justify-content: center;
  color: gray;
  margin-bottom: 5px;
}
</style>
